<template>
  <view class="waterAnaly">
    <uni-section class="mb-10" title="资产统计" type="line"></uni-section>
    <!-- 安装总数、在线、休眠 -->
    <view class="total">
      <qiun-data-charts type="ring" :opts="taotalOpts" :chartData="taotalData" />
    </view>
    <!-- 每个村子的在线休眠数量 -->
    <uni-section class="mb-10" title="村落统计" type="line"></uni-section>
    <view class="village">
      <qiun-data-charts type="area" :ontouch="true" :opts="villageOpts" :chartData="villageData" />
    </view>
    <uni-section class="mb-10" title="用水分析" type="line"></uni-section>
    <!-- 用水分析 -->
    <view class="analyze">
      <qiun-data-charts type="area" :ontouch="true" :opts="analyzeOpts" :chartData="analyzeData" />
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onReady } from "@dcloudio/uni-app";
import { waterAnlysisApi, projectNumApi, WaterUsageAnalysisApi } from "@/axios/pageApi/waterAnlysis"
// 总数配置
let taotalOpts = ref({
  rotate: false,
  rotateLock: false,
  color: [
    "#1890FF",
    "#91CB74",
    "#FAC858",
    "#EE6666",
    "#73C0DE",
    "#3CA272",
    "#FC8452",
    "#9A60B4",
    "#ea7ccc",
  ],
  padding: [5, 5, 5, 5],
  dataLabel: true,
  enableScroll: false,
  legend: {
    show: true,
    position: "right",
    lineHeight: 25,
  },
  title: {
    name: "终端数量",
    fontSize: 11,
    color: "#666666",
  },
  subtitle: {
    name: "",
    fontSize: 12,
    color: "#7cb5ec",
  },
  extra: {
    ring: {
      ringWidth: 20,
      activeOpacity: 0.5,
      activeRadius: 20,
      offsetAngle: 0,
      labelWidth: 15,
      border: false,
      borderWidth: 3,
      borderColor: "#FFFFFF",
    },
  },
});
// 总数数据
let taotalData = ref([]);
// 村子配置
let villageOpts = ref({
  dataLabel: false,
  color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
  padding: [15, 15, 0, 15],
  enableScroll: true,
  touchMoveLimit: 60,
  legend: {},
  xAxis: {
    scrollShow: true,
    disableGrid: true,
    itemCount: 3,
    scrollAlign: "left",
    format: "xAxisConfig1"
  },
  yAxis: {
    gridType: "dash",
    dashLength: 2,
    padding: 100,
    format: "yAxisDemo3"
  },
  extra: {
    area: {
      type: "curve",
      opacity: 0.2,
      addLine: true,
      width: 2,
      gradient: true,
      activeType: "hollow"
    }
  }
});
// 村子的数据
let villageData = ref({});
// 用水分析配置
let analyzeOpts = ref({
  color: [
    "#1890FF",
    "#91CB74",
    "#FAC858",
    "#EE6666",
    "#73C0DE",
    "#3CA272",
    "#FC8452",
    "#9A60B4",
    "#ea7ccc",
  ],
  padding: [15, 15, 0, 15],
  enableScroll: true,
  legend: {},
  xAxis: {
    scrollShow: true,
    disableGrid: true,
    itemCount: 3,
    scrollAlign: "left",
    format: "xAxisDemo3"

  },
  yAxis: {
    gridType: "dash",
    dashLength: 2,
    padding: 100,
    format: "yAxisDemo3"

  },
  extra: {
    area: {
      type: "curve",
      opacity: 0.2,
      addLine: true,
      width: 2,
      gradient: true,
      activeType: "hollow",
    },
  },
});
// 用水分析数据
let analyzeData = ref([]);
onReady(() => {
  // 获取总数
  gettaotalData();
  // 获取每个村子的数量
  getvillageDate();
  // 获取用水分析数据
  getanalyzeData();
});

// 获取全部数量与在线休眠数量
async function gettaotalData() {
  let res = await waterAnlysisApi()
  let waterData = res.data
  taotalOpts.value.subtitle.name = `${waterData.totalOfDevices}`
  setTimeout(() => {
    //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
    let deviceres = {
      series: [
        {
          data: [
            {
              name: "在线",
              value: Number(waterData.onlineDevices),
            },
            {
              name: "休眠",
              value: Number(waterData.offlineDevices),
            },
          ],
        },
      ],
    };
    taotalData.value = JSON.parse(JSON.stringify(deviceres));
  }, 500);
}
// 获取每个村子
async function getvillageDate() {
  let villageDataRes = await projectNumApi()
  let villageDatas = villageDataRes.data
  setTimeout(() => {
    let res = {
      categories: villageDatas.categories,
      series: villageDatas.series.map(item => {return {...item,format: "yAxisDemo3"}}),
      
    };
    console.log(res, 'res');

    villageData.value = JSON.parse(JSON.stringify(res))
    //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
  }, 500);
}
// 获取用水分析数据
async function getanalyzeData() {
  let WaterUsageRes = await WaterUsageAnalysisApi()
  console.log(WaterUsageRes, 'WaterUsageRes');

  setTimeout(() => {
    //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
    let res = {
      categories: WaterUsageRes.data.month,
      series: [
        {
          name: "用水量",
          data: WaterUsageRes.data.water,
          format: "yAxisDemo3"
        },
      ],
    };
    analyzeData.value = JSON.parse(JSON.stringify(res));
  }, 500);
}
</script>

<style>
.waterAnaly {
  height: 100vh;
  padding: 2vw;
  background-color: #eee;
}

.total {
  height: 20vh;
  padding-top: 30rpx;
  border-radius: 10rpx;
  margin: 15rpx 0;
  background-color: #fff;
}

.village {
  height: 30vh;
  padding-top: 30rpx;
  border-radius: 10rpx;
  margin: 15rpx 0;
  background-color: #fff;
}

.analyze {
  height: 30vh;
  padding-top: 30rpx;
  border-radius: 10rpx;
  margin: 15rpx 0;
  background-color: #fff;
}
</style>